<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>悠U</title>
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="${path}/plugins/bootstrap/css/bootstrap.css" type="text/css">
    <%--css--%>
    <link rel="stylesheet" href="${path}/css/traveler/travelerinfo.css">

</head>
<body>
<%--导航--%>
<%@ include file="../common/nav_top.jsp" %>

<!-- 主图片 begin -->
<div class="container-fluid">
    <div class="row">
        <img src="http://pzgv309jp.bkt.clouddn.com/banner_note.gif" style="height: 202px;width: 100%">
    </div>
</div>

<!-- 主图片 end -->

<!-- 主体 -start-->
<div class="container-fluid">
    <div class="row" style="background-color:#efefef;">
        <div style="width: 100%;height: 58px;background-color: white;padding-left: 52%;padding-top:1px ">
            <h3 style="color: #ff7200"><b>${userTable.username}的小窝窝啊</b></h3>
        </div>
        <div style="width:980px;margin:0 auto;">
            <div class="left"
                 style="width: 280px;height: 600px;background-color: white;float: left;margin-top: 3px;text-align: center">

                <div style="height: 70px;">
                    <div style="position:relative;width: 120px;;height:120px;z-index:2;left:28%;top:-52px;">
                        <a href="#"><img id="author-headerImg" class="img-circle"
                                         src="${userTable.headImg}"></a>
                        <div style="position:absolute;width: 33px;;height:33px;z-index:2;left:74%;top:78%;">
                            <c:if test="${noteAuthor.flag==1}">
                                <img id="author-crown" class="img-circle" src="http://pzgv309jp.bkt.clouddn.com/crown.jpg">
                            </c:if>
                        </div>
                    </div>
                </div>
                <div class="MAvaName">${userTable.username}

                    <c:if test="${userTable.sex=='男'}">
                        <i class="MGenderMale"></i>
                    </c:if>

                    <c:if test="${userTable.sex=='女'}">
                        <i class="MGenderFemale"></i>
                    </c:if>
                    <!-- 男
                    background-position: -174px -210px;
                    -->
                    <!-- 女
                        background-position: -195px -210px;
                    -->
                </div>

                <div style="margin-top: 20px;">
                    <div class="biaoqian">
                        <div>
                            摄影高手
                        </div>
                        <div>
                            美食达人
                        </div>
                        <div>
                            和善
                        </div>
                        <div>
                            活地图
                        </div>
                    </div>
                </div>

                <div class="MAvaInfo clearfix;" style="margin-top:10px;">
                    <span class="MAvaPlace flt1" title="上海">现居：${userTable.usualPlace}</span>
                    <%--<button class="buttons button1">--%>
                        <%--<font size="4px"><b>+</b></font>&nbsp;关注--%>
                    <%--</button>--%>
                </div>

                <!-- 个人简介 -->

                <div class="MProfile" style="margin-top: 10px;">
                    <font size="3px" color="gray"><b>“</b></font>

                    <font size="3px">${userTable.intro}</font>
                    <font size="3px" color="gray"><b>”</b></font>

                </div>

                <div style="height: 62px;margin-top: 10px;">

                    <div
                            style="width: 92px;height: 100%;;border-top: 2px solid #efefef;border-bottom: 2px solid #efefef;padding-top:8px;float: left;">
                        <a href="#关注列表" target="_blank">
                            <c:if test="${noteAuthor.follow<1000000}">
                                <font size="4px" color="black"><b>${noteAuthor.follow}</b></font>
                            </c:if>
                            <c:if test="${noteAuthor.follow>999999}">
                                <font size="4px" color="black"><b>999999+</b></font>
                            </c:if>
                        </a>
                        <p style="font-size: 14px;color: #999">关注</p>
                    </div>
                    <div
                            style="width: 92px;height: 100%;;border-left: 2px solid #efefef;border-top: 2px solid #efefef;border-bottom: 2px solid #efefef;padding-top:8px;float: left;">
                        <a href="#关注列表" target="_blank">
                            <c:if test="${noteAuthor.fansnum<1000000}">
                                <font size="4px" color="black"><b>${noteAuthor.fansnum}</b></font>
                            </c:if>
                            <c:if test="${noteAuthor.fansnum>999999}">
                                <font size="4px" color="black"><b>999999+</b></font>
                            </c:if>
                        </a>
                        <p style="font-size: 14px;color: #999">粉丝</p>
                    </div>
                    <div
                            style="width: 92px;height: 100%;;border-left: 2px solid #efefef;border-top: 2px solid #efefef;border-bottom: 2px solid #efefef;padding-top:8px;float: left;">
                        <a href="#关注列表" target="_blank">
                            <font size="4px" color="black"><b>${noteAuthor.diamand}</b></font>
                        </a>
                        <p style="font-size: 14px;color: #999">钻石</p>
                    </div>

                </div>

                <%--<div style="height: 190px;margin-top: 20px;border-top:1px solid #efefef;">--%>
                    <%--<div class="MUsersTitle" style="margin-bottom:20px;">最新访客</div>--%>

                    <%--<div class="xiangqing" style="width: 220px;margin-left: 20px; ">--%>
                        <%--<div class="col-md-3">--%>
                            <%--<a href="#本人详情"><img src="${path}/imgs/travler/travler1.jpg"--%>
                                                 <%--class="img-circle"></a><br>--%>
                            <%--<a href="#关注列表" class="a" target="_blank">--%>
                                <%--<font size="2px" color="#ff7200">moum</font>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                        <%--<div class="col-md-3">--%>
                            <%--<a href="#本人详情"><img src="${path}/imgs/travler/travler2.jpg"--%>
                                                 <%--class="img-circle"></a><br>--%>
                            <%--<a href="#关注列表" class="a" target="_blank">--%>
                                <%--<font size="2px" color="#ff7200">moum</font>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                        <%--<div class="col-md-3">--%>
                            <%--<a href="#本人详情"><img src="${path}/imgs/travler/travler5.jpg"--%>
                                                 <%--class="img-circle"></a><br>--%>
                            <%--<a href="#关注列表" class="a" target="_blank">--%>
                                <%--<font size="2px" color="#ff7200">moum</font>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                        <%--<div class="col-md-3">--%>
                            <%--<a href="#本人详情"><img src="${path}/imgs/travler/travler4.jpg"--%>
                                                 <%--class="img-circle"></a><br>--%>
                            <%--<a href="#关注列表" class="a" target="_blank">--%>
                                <%--<font size="2px" color="#ff7200">moum</font>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                        <%--<div class="col-md-3">--%>
                            <%--<a href="#本人详情"><img src="${path}/imgs/travler/travler1.jpg"--%>
                                                 <%--class="img-circle"></a><br>--%>
                            <%--<a href="#关注列表" class="a" target="_blank">--%>
                                <%--<font size="2px" color="#ff7200">moum</font>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                        <%--<div class="col-md-3">--%>
                            <%--<a href="#本人详情"><img src="${path}/imgs/travler/travler2.jpg"--%>
                                                 <%--class="img-circle"></a><br>--%>
                            <%--<a href="#关注列表" class="a" target="_blank">--%>
                                <%--<font size="2px" color="#ff7200">moum</font>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                        <%--<div class="col-md-3">--%>
                            <%--<a href="#本人详情"><img src="${path}/imgs/travler/travler5.jpg"--%>
                                                 <%--class="img-circle"></a><br>--%>
                            <%--<a href="#关注列表" class="a" target="_blank">--%>
                                <%--<font size="2px" color="#ff7200">moum</font>--%>
                            <%--</a>--%>
                        <%--</div>--%>
                        <%--<div class="col-md-3">--%>
                            <%--<a href="#本人详情"><img src="${path}/imgs/travler/travler4.jpg"--%>
                                                 <%--class="img-circle"></a><br>--%>
                            <%--<a href="#关注列表" class="a" target="_blank">--%>
                                <%--<font size="2px" color="#ff7200">moum</font>--%>
                            <%--</a>--%>
                        <%--</div>--%>

                    <%--</div>--%>

                <%--</div>--%>
                <div
                        style="width:90%;height:25px;margin-top: 5px;margin-left: 20px;border-bottom: 1px solid #999;padding-bottom: 10px">
                    <font size="2.5px" color="#999">累计访问</font>
                    <c:if test="${noteAuthor.sumbro<1000000}">
                        <font size="2px" color="#ff7200">${noteAuthor.sumbro}</font>
                    </c:if>
                    <c:if test="${noteAuthor.sumbro>999999}">
                        <font size="2px" color="#ff7200">999999+</font>
                    </c:if>
                    &nbsp;&nbsp;&nbsp;<font size="2px" color="#999">今日</font>
                    <c:if test="${noteAuthor.today<1000000}">
                        <font size="2px" color="#ff7200">${noteAuthor.today}</font>
                    </c:if>
                    <c:if test="${noteAuthor.today>999999}">
                        <font size="2px" color="#ff7200">999999+</font>
                    </c:if>

                </div>

            </div>

            <div class="right"
                 style="width: 680px;background-color: white;float: left;margin-left: 20px;margin-top: 20px;margin-bottom: 20px">
                <!-- 顶部 -start -->
                <div style="width: 100%;height:110px;">
                    <div style="width: 432px;margin: 0 auto;padding-top: 25px;padding-left: 40px;">
                        <div style="text-align:center;margin:0 auto;;width: 143px;height: 60px;float: left;">
                            <font size="4px" color="black"><b>${noteAuthor.noteCount}</b></font>
                            <p style="font-size: 14px;color: #999">游记</p>
                        </div>
                        <div
                                style="text-align:center;margin:0 auto;border-left: 1px solid #cec4c4;width: 143px;height: 60px;float: left;">
                            <font size="4px" color="black"><b>${noteAuthor.commentCount}</b></font>
                            <p style="font-size: 14px;color: #999">回复</p>
                        </div>

                    </div>
                </div>
                <!-- 顶部 -end-->

                <input type="hidden" id="authorId" value="${noteAuthor.id}">
                <!-- 文章 -start -->
                <div id="notes">

                </div>

                <!-- 文章 -end -->

            </div>
        </div>
    </div>

</div>

<%@ include file="../common/nav_bottom.jsp" %>

<!-- 主体 -end-->

<%--目的:为了让外部的js文件使用灵活的项目的上下文路径--%>
<input type="hidden" value="${path}" id="path">

<script>
    $(function () {
        //如果js和jsp在同一个文件中,那么可以在js中使用EL表达式
        //如果js是单独的外部文件,则不允许使用EL表达式
        $("#notes").load("${path}/travelerInfoDis/notesPage",{authorId:${noteAuthor.id}});

    });

</script>

<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="${path}/plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="${path}/plugins/bootstrap/js/bootstrap.js"></script>

<%--<script src="${path}/js/content.js?v=1.0.0"></script>--%>
<%--<script src="${path}/js/index/lunbo.js"></script>--%>

<script>
    function del(obj) {
//        var noteId = document.getElementById("noteId").value;
        $.post("${path}/travelerInfoDis/update",{id:obj},function (data) {
            $("#notes").load("${path}/travelerInfoDis/notesPage",{authorId:${noteAuthor.id}});
        });
    }
</script>

</body>

</html>